<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="box">
      <p><label>属性名：</label><input class="inp1" type="text" value="color" /></p>
      <p><label>属性值：</label><input class="inp2" type="text" value="skyblue" /></p>
      <p><label></label><button class="btn1">确定</button><button class="btn2">重置</button></p>
    </div>
    <div id="box1">
      在上方输入框输入"属性名"及"属性值"，点击确定按钮查看效果。
    </div>
  </body>
  <script>
    let changeStyle = function(elem,name,value){
        elem.style[name] = value
    }
    let box = document.querySelector("#box")
    let box1 = document.querySelector("#box1")
    let inp1 = document.querySelector(".inp1")
    let inp2 = document.querySelector(".inp2")
    let btn1 = document.querySelector(".btn1")
    let btn2 = document.querySelector(".btn2")
    btn1.onclick = function() {
        changeStyle(box1,inp1.value,inp2.value)
    }
    btn2.onclick = function(){
        box1.removeAttribute("style") 
    }
  </script>
  <style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        position: relative;
        text-align: center;
    }
    #box1{
        position: absolute;
        left: 50%;
        margin-left: -100px;
        width: 200px;
        height: 200px;
        background: #000;
        color: #FFF;
    }
  </style>
</html>
